<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .ico-plus{
            opacity: 0;
        }
    </style>
</head>
<body>
<div class="content-img">
    <ul class="content-img-list">
    </ul>
    <!--<div class="file">-->
    <!--    <label>-->
    <!--        <i class="ico-plus"></i>上传图片，支持jpg/png<input type="file" name="file" accept="image/*" id="upload" >-->
    <!--    </label>-->
    <!--</div>-->
    //createObjectURL的方法
    <form action="" enctype="multipart/form-data">
        <input id="file" class="filepath" onchange="changepic(this)" type="file"><br>
        <img src="" id="show" width="200">
    </form>
    <script>
        function changepic(obj) {
            //console.log(obj.files[0]);//这里可以获取上传文件的name
            var newsrc=getObjectURL(obj.files[0]);
            document.getElementById('show').src=newsrc;
        }
        //建立一個可存取到該file的url
        function getObjectURL(file) {
            var url = null ;
            // 下面函数执行的效果是一样的，只是需要针对不同的浏览器执行不同的 js 函数而已
            if (window.createObjectURL!=undefined) { // basic
                url = window.createObjectURL(file) ;
            } else if (window.URL!=undefined) { // mozilla(firefox)
                url = window.URL.createObjectURL(file) ;
            } else if (window.webkitURL!=undefined) { // webkit or chrome
                url = window.webkitURL.createObjectURL(file) ;
            }
            return url ;
        }
    </script>
</div>
</body>
<script>
    var fileList = this.files;
    for(var i = 0; i < fileList.length; i++) {
        var imgSrcI = getObjectURL(fileList[i]);
        imgName.push(fileList[i].name);
        imgSrc.push(imgSrcI);
        imgFile.push(fileList[i]);
    }
</script>
</html>